<!DOCTYPE html>
<html style="background-color: #fff;">
<head>
  <meta charset="utf-8">
  <title>layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="/graph-benchmark/layui/css/layui.css"  media="all">
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>

<style>
#jobInfo{
   min-height:100px;
   overflow-y:auto;
   max-height:300px;
}
/* loading css start*/
  /* Toast */
    .ibox {clear:both;margin: 0px;padding: 0px;width:100%;}
    .ibox .ibox-content {clear: both;line-height: normal;padding:25px;}
    .web_transparent {position: fixed;z-index: 1000;top: 0;right: 0;left: 0;bottom: 0;}
    .web-toast {position: fixed;z-index: 5000;height: 90px;width: 16em;min-height: 4em;top: 365px;margin-left: 120px;background: rgba(40, 40, 40, 0.75);text-align: center;border-radius: 5px;color: #FFFFFF;} 
    .web-toast_content { font-size: 16px;}
    .sk-spinner-three-bounce.sk-spinner{margin: 20px auto 10px;text-align: center; }
    .sk-spinner-three-bounce div {width: 18px;height: 18px;background-color: #f6296d;border-radius: 100%;display: inline-block;-webkit-animation: sk-threeBounceDelay 1.4s infinite ease-in-out;animation: sk-threeBounceDelay 1.4s infinite ease-in-out;-webkit-animation-fill-mode: both;animation-fill-mode: both;}
    .sk-spinner-three-bounce .sk-bounce1 {-webkit-animation-delay: -.32s;animation-delay: -.32s;}
    .sk-spinner-three-bounce .sk-bounce2 {-webkit-animation-delay: -.16s;animation-delay: -.16s;}
    @-webkit-keyframes sk-threeBounceDelay {
        0%,100%,80% {-webkit-transform: scale(0);transform: scale(0);}
        40% {-webkit-transform: scale(1);transform: scale(1);}
    }
    @keyframes sk-threeBounceDelay {
    0%,100%,80% {-webkit-transform: scale(0);transform: scale(0);}
    40% {-webkit-transform: scale(1);transform: scale(1);}
    }
    /*spinner*/
    .pinkspin{color:#ef1a60;}
    .greenspin{color:#07b30b;}
     /* loading css end*/
</style>

<body>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
  <legend>数据模型</legend>
</fieldset>
<img src="/graph-benchmark/views/images/graph.jpg" style="margin-left:200px;width:250px;height:250px;" alt="图数据" />
<img src="/graph-benchmark/views/images/tpch_schema.jpg" style="margin-left:100px;width:350px;height:300px;"  alt="关系数据" />

<div><span style="margin-left: 300px;">图模型</span>                  <span style="margin-left: 350px;">关系模型</span></div>
<form class="layui-form" action="" lay-filter="form_config" id="generateid">
 
  
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
  <legend>数据生成选择</legend>
</fieldset>

<div class="layui-form-item">
<div style="margin-left:30px;">
    <label class="layui-form-label" style="width:120px;">数据生成选项</label>
    <div class="layui-input-inline">
      <select name="nodetype">
        <option value="">请选择数据类型</option>
        <option value="rel">关系数据</option>
        <option value="gra">图数据</option>
        <option value="doc">文档数据</option>
        <option value="kv">键值对数据</option>
      </select>
    </div>
    <div class="layui-input-inline">
      <select name="edgetype">
        <option value="">请选择数据集大小</option>
        <option value="s">S</option>
        <option value="m">M</option>
        <option value="l">L</option>
         <option value="xl">XL</option>
      </select>
    </div>
    <button class="layui-btn" lay-submit=""  lay-filter="submit_conf" style="background-color:#3c8dbc">立即提交</button>
    </div>
  </div>
  
</form>


<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
  <legend>数据生成日志</legend>
</fieldset>

<div style="padding: 20px; background-color: #fff;">
  <div class="layui-row layui-col-space15">
    <div class="layui-col-md6" style="width:80%;margin-left:50px;">
      <div class="layui-card">
        <div class="layui-card-body" id = "jobInfo"></div>
      </div>
    </div>
  </div>
</div>   
<div id="jobInfo"></div>    


    
<script src="/graph-benchmark/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="/graph-benchmark/views/js/loading.js"></script> 
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>

layui.use(['form', 'layedit', 'laydate','table'], function(){
  var form = layui.form;
//  ,laydate = layui.laydate;
  
/*   //日期
  laydate.render({
    elem: '#date'
  });
  laydate.render({
    elem: '#date1'
  }); */
  
  var table = layui.table;
  
 /*  table.render({
      elem: '#test'
      ,url:'highEchart/getDatabaseList'
      ,width: 900 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
      ,cols: [[
        {field:'dbName', width:100, title: '数据库名'}
        ,{field:'dbType', width:100, title: '数据库类型'}
        ,{field:'dbPath', width:700, title: '安装路径'}
      ]]
    }); */
  
  
  //监听提交
  form.on('submit(submit_conf)', function(data){
	/*  {"volume":"1000","nodetype":"1","edgetype":"1","querysize":"1","graphsize":"local"} */ 
	console.log(data.field.nodetype)
	datatype = data.field.nodetype
	if(datatype == 'rel'){
		Init.WebToast("关系数据生成中...");
	}
	else if(datatype == 'gra'){
		Init.WebToast("图数据生成中...");
	}else if(datatype == 'doc'){
		Init.WebToast("文档数据生成中...(开放接口)");
	}else{
		Init.WebToast("键值对数据生成中...(开放接口)");
	}
	
	console.log(data)
	 $.ajax({
	    url: 'highEchart/startGenData',
	    data: { username:'neo4j', passwd:'xiaojian', 
	    			nodetype:'item_1',edgetype:'rel_1',
	    			querySize:1,graphSize:2000,
	    			graphLayer:5,graphNum:1,
	    			dtype:datatype},
	    success: function(data) {
	    	//停止加载框
		Init.ClearToast("#webToast", 1)
	    	console.log(data)
	  //  	var points = JSON.parse(point.value)
  		document.getElementById("jobInfo").innerHTML = data.value + "<br>";
	    },
	    cache: false
	  });
	
	
    return false;
  });
  
  
  //监听提交
  form.on('submit(submit_add)', function(data){
	/*  {"volume":"1000","nodetype":"1","edgetype":"1","querysize":"1","graphsize":"local"} */ 
	Init.WebToast("数据库添加中...");
	//console.log(data)
	 $.ajax({
	    url: 'highEchart/addDatabase',
	    data: {dbName:data.field.dbName,dbType:data.field.dbType,dbPath:data.field.dbPath},
	    success: function(data) {
	    	//停止加载框
		Init.ClearToast("#webToast", 1)
	 //   	console.log(data)
	  //  	var points = JSON.parse(point.value)
	    },
	    cache: false
	  });
    return false;
  });
  
});
</script>

</body>
</html>